<template>
  <el-container>
    <el-row class="wrap" v-loading="loading" element-loading-text="拼命加载中">
      <el-col :span="24" class="warp-breadcrum">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/dashboard' }"><span style="color: #837e7c;font-weight: normal;">首页</span></el-breadcrumb-item>
          <el-breadcrumb-item><span style="color: #837e7c;font-weight: normal;">AI外呼</span></el-breadcrumb-item>
          <el-breadcrumb-item><span style="color: #5d9cec;">AI外呼任务</span></el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>

      <el-col :span="24" class="wrap-main">
        <!--工具栏-->
        <el-col :span="24" class="gg-toolBar-wrap">
          <el-col :span="24" class="toolbar gg-toolBar">
            <el-form :inline="true" :model="formInline">
              <el-form-item>
                <el-input size="small" v-model="formInline.taskName" placeholder="输入任务名称" style="min-width: 240px;"
                          @keyup.enter.native="handleSearch"></el-input>
              </el-form-item>
              <el-form-item prop="taskDate">
                <el-date-picker size="small" type="date" placeholder="选择日期" v-model="formInline.taskDate" style="min-width: 240px;"
                                @keyup.enter.native="handleSearch"></el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-select size="small" v-model="formInline.taskStatus" placeholder="请选择状态" style="min-width: 240px;">
                  <el-option label="进行中" value="1"></el-option>
                  <el-option label="已完成" value="2"></el-option>
                  <el-option label="未开始" value="3"></el-option>
                  <el-option label="已取消" value="4"></el-option>
                  <el-option label="未完成" value="5"></el-option>
                  <el-option label="不可用" value="6"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="small" icon="el-icon-search" @click="handleSearch">搜索</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-col>
        <!--表格区域-->
       <el-col :span="24" class="gg-tableMainWrap">
         <!--新建按钮-->
         <el-row class="gg-tableBtnWrap">
           <el-button type="primary" size="small" icon="el-icon-plus" @click="addTask()">新建任务</el-button>
         </el-row>
         <!--表格-->
        <el-row class="gg-tableWrap">
          <el-table :data="tableData" border highlight-current-row style="width: 100%;">
            <el-table-column prop="taskName" label="任务名称">
            </el-table-column>
            <el-table-column prop="taskInfo" label="任务简介">
            </el-table-column>
            <el-table-column prop="taskStatus" label="任务状态" width="100">
              <template slot-scope="scope">
                <el-tag :color="scope.row.statusValue|statusFilter">{{ scope.row.taskStatus }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="taskStarter" label="创建人" width="80">
            </el-table-column>
            <el-table-column prop="taskCreateTime" label="创建时间" width="160" sortable>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="mini" type="primary">编辑</el-button>
                <el-button size="mini" type="success" @click="openDetail(isDetail)">详情</el-button>
                <el-button size="mini" type="danger" @click="remove(scope.$index,scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>

         <!--分页插件-->
         <el-col :span="24" class="toolbar">
           <el-pagination
             @size-change="handleSizeChange"
             @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 50,100]"
             :page-size="10"
             layout="total, sizes, prev, pager, next, jumper"
             style="float:right;">
           </el-pagination>
         </el-col>
       </el-col>
      </el-col>
    </el-row>
  </el-container>
</template>

<script>
    export default {
        name: "CallTaskList",
        filters: {
          statusFilter(color) {
            const statusMap = {
              finished:'#04c18d',
              doing:'#409eff',
              draft: '#b59ae8',
              canceled: '#f56c6c',
              unfinished:'#e6a23c',
              unused:'#e6effb'
            };
            return statusMap[color]
          }
        },
        data() {
          return {
            total: 0,
            page: 1,
            limit: 10,
            loading: false,
            isDetail:true,
            currentPage: 1,
            formInline: {
              taskName: '',
              taskDate: '',
              taskStatus: ''
            },
            tableData: [{
              taskName: '外呼任务一',
              taskInfo: '外呼任务第一项工作',
              taskStatus: '已完成',
              statusValue:'finished',
              taskStarter:'张三',
              taskCreateTime:'2018-09-01'
            }, {
              taskName: '外呼任务二',
              taskInfo: '外呼任务第二项工作',
              taskStatus: '进行中',
              statusValue:'doing',
              taskStarter:'张三',
              taskCreateTime:'2018-07-01'
            }, {
              taskName: '外呼任务三',
              taskInfo: '外呼任务第三项工作',
              taskStatus: '未开始',
              statusValue:'draft',
              taskStarter:'张三',
              taskCreateTime:'2017-11-01'
            },
              {
              taskName: '外呼任务四',
              taskInfo: '外呼任务第四项工作',
              taskStatus: '已取消',
              statusValue:'canceled',
              taskStarter:'张三',
              taskCreateTime:'2018-09-11'
            },
              {
                taskName: '外呼任务五',
                taskInfo: '外呼任务第五项工作',
                taskStatus: '未完成',
                statusValue:'unfinished',
                taskStarter:'张三',
                taskCreateTime:'2017-11-30'
              },
              {
                taskName: '外呼任务六',
                taskInfo: '外呼任务第三项工作',
                taskStatus: '不可用',
                statusValue:'unused',
                taskStarter:'张三',
                taskCreateTime:'2017-08-21'
              }]
          }
        },
      rules:{
        taskDate: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
      },
      methods: {
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
        },
        handleSearch() {
          console.log('submit!');
        },
        addTask:function(){
          this.$router.push("/addTask")
        },
        openDetail:function(){
          this.$router.push({name:'addTask',params:{isDetail:true}})
        },
        remove:function(index,row){
          let that = this;
          this.$confirm('确定要删除该条记录吗?','操作提示',{
            confirmButtonText:'确定',
            cancelButtonText:'取消',
            type:"warning"
          }).then(()=>{
            this.$message({
              type:'success',
              message:'删除成功!',
            })
          }).catch(()=>{
            this.$message({
              type:'info',
              message:'已取消删除'
            })
          })
        },
      }
    }
</script>

<style scoped>
  .el-tag {
    padding: 0px 8px;
    height: 25px;
    line-height: 25px;
    font-size: 11px;
    color: #fff;
    border-radius: 12px;
    box-sizing: border-box;
    border:none;
  }
</style>
